<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title data-i18n="resources.title_queryByWFS"></title>
    <style type="text/css">
        .editPane {
            position: absolute;
            right: 50px;
            top: 50px;
            text-align: center;
            background: #FFF;
            display: inline-block;
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.text_queryByWFS"></h5>
    </div>
    <div class='panel-body' id='params'>
        <p></p>
        <div align='center' class='button-group'>
            <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.btn_polygon"
                   onclick="drawGeometry()"/>
            <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear"
                   onclick="clearFeatures()"/>
        </div>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, layer, vectorLayer, vectorLayer, vector_style, vector_style_select, myFilter, drawings = null, draw = null,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-world/rest/maps/World",
        url2 = host + "/iserver/services/data-world/wfs100";
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
    }, notice());

    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {
        transparent: true,
        cacheEnabled: true
    }, {maxResolution: "auto"});

    vector_style = new SuperMap.Style({
        fillColor: '#669933',
        fillOpacity: 0.8,
        pointRadius: 8,
        strokeColor: '#aaee77',
        strokeWidth: 3
    });

    vector_style_select = new SuperMap.Style({
        fillColor: '#000',
        fillOpacity: 0.9,
        fontColor: '#232323',
        strokeColor: '#ffffff'
    });

    myFilter = new SuperMap.Filter.Comparison({
        type: SuperMap.Filter.Comparison.EQUAL_TO,
        property: "CAPITAL",
        value: ""
    });

    vectorLayer = new SuperMap.Layer.Vector("World Capitals", {
        strategies: [new SuperMap.Strategy.BBOX()],
        protocol: new SuperMap.Protocol.WFS({
            version: "1.0.0",
            url: url2,
            featureType: "Capitals",
            featureNS: "http://www.supermap.com/World",
            featurePrefix: "World",
            geometryName: "the_geom"

            //类似的ArcGIS请求参数设置（已验证返回数据）
            //version:"1.0.0",
            //url:"http://localhost:6080/arcgis/services/SampleWorldCities/MapServer/WFSServer",
            //featureType:"cities",
            //featureNS:"http://localhost:6080/arcgis/services/SampleWorldCities/MapServer/WFSServer",
            //featurePrefix:"SampleWorldCities",
            //geometryName:"shape"
        }),

        //filter使用方式一：
        //filter: new SuperMap.Filter.Logical({
        //    type: SuperMap.Filter.Logical.AND,
        //    filters: [
        //        new SuperMap.Filter.Comparison({
        //            type: SuperMap.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
        //            property: "SMID",
        //            value: "50"
        //        }),
        //        new SuperMap.Filter.Comparison({
        //            type: SuperMap.Filter.Comparison.LESS_THAN_OR_EQUAL_TO,
        //            property: "SMID",
        //            value: "60"
        //        })
        //    ]
        //}),

        //filter使用方式二：
        filter: myFilter,
        styleMap: new SuperMap.StyleMap({
            'default': vector_style,
            'select': vector_style_select
        })
    });

    var select_feature_control = new SuperMap.Control.SelectFeature(vectorLayer);
    map.addControl(select_feature_control);
    select_feature_control.activate();
    layer.events.on({"layerInitialized": addLayer});

    //空间查询
    drawings = new SuperMap.Layer.Vector("drawings");
    map.addLayer(drawings);
    draw = new SuperMap.Control.DrawFeature(drawings, SuperMap.Handler.Polygon);
    map.addControl(draw);

    function drawGeometry() {
        clearFeatures();
        draw.activate();
        draw.events.on({featureadded: drawCompleted});
    }

    function clearFeatures() {
        vectorLayer.removeAllFeatures();
        drawings.removeAllFeatures();
    }

    function addLayer() {
        map.addLayers([layer, vectorLayer]);
        map.setCenter(new SuperMap.LonLat(0, 0), 0);
    }

    function drawCompleted(event) {
        vectorLayer.filter = new SuperMap.Filter.Spatial({
            type: SuperMap.Filter.Spatial.INTERSECTS,
            value: event.feature.geometry
        });
        vectorLayer.refresh({force: true});
        vectorLayer.filter = myFilter;
        draw.deactivate();
        widgets.alert.clearAlert();
    }

    function notice() {
        widgets.alert.showAlert(resources.msg_drawPolygon, true);
    }

</script>
</body>
</html>
